<!DOCTYPE html>
<html>
<head>
    <title>Standing Wave by Reflection</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physics-canvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Style and parameters
        const lineWidth = 2.5;
        const arrowSize = 8;
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Coordinates
        const yTop = 150;
        const yBottom = 250;
        const xStart = 50;
        const xNodesStart = 200;
        const mirrorX = 500;
        const mirrorWidth = 25;
        const mirrorY = yTop - 25;
        const mirrorHeight = yBottom - yTop + 50;
        
        // --- Draw Mirror (M) ---
        ctx.fillStyle = '#AAAAAA'; // Gray color for the mirror
        ctx.fillRect(mirrorX, mirrorY, mirrorWidth, mirrorHeight);
        ctx.strokeStyle = 'black';
        ctx.strokeRect(mirrorX, mirrorY, mirrorWidth, mirrorHeight);

        // Label 'M'
        ctx.fillStyle = 'black';
        ctx.font = 'bold 24px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillText('M', mirrorX + mirrorWidth + 10, mirrorY);

        // --- Draw Standing Wave Nodes (Vertical Lines) ---
        const numNodes = 9;
        // The last node is at the mirror surface
        const nodeSpacing = (mirrorX - xNodesStart) / (numNodes - 1);

        ctx.beginPath();
        for (let i = 0; i < numNodes; i++) {
            const x = xNodesStart + i * nodeSpacing;
            ctx.moveTo(x, yTop);
            ctx.lineTo(x, yBottom);
        }
        ctx.stroke();


        // --- Draw Incident and Reflected Wave representations ---
        
        // Top line (Incident Wave)
        ctx.beginPath();
        ctx.moveTo(xStart, yTop);
        ctx.lineTo(xNodesStart, yTop);
        ctx.stroke();

        // Bottom line (Reflected Wave)
        ctx.beginPath();
        ctx.moveTo(xStart, yBottom);
        ctx.lineTo(xNodesStart, yBottom);
        ctx.stroke();

        // --- Helper function to draw arrows ---
        function drawArrow(x, y, size, direction) {
            ctx.beginPath();
            ctx.fillStyle = 'black';
            if (direction === 'right') {
                // Tip at x, base is to the left
                ctx.moveTo(x, y);
                ctx.lineTo(x - size, y - size / 2);
                ctx.lineTo(x - size, y + size / 2);
            } else { // 'left'
                // Tip at x, base is to the right
                ctx.moveTo(x, y);
                ctx.lineTo(x + size, y - size / 2);
                ctx.lineTo(x + size, y + size / 2);
            }
            ctx.closePath();
            ctx.fill();
        }

        // Add arrows to the lines
        // Arrows on the top line (pointing right)
        drawArrow(xStart + 50, yTop, arrowSize, 'right');
        drawArrow(xStart + 100, yTop, arrowSize, 'right');

        // Arrows on the bottom line (pointing left)
        drawArrow(xStart + 50, yBottom, arrowSize, 'left');
        drawArrow(xStart + 100, yBottom, arrowSize, 'left');

    </script>
</body>
</html>